

<template>
  <div class="HelloWorld">HelloWorld</div>
  <p>props：{{ num }},{{ str }},{{ bool }}</p>
  <button @click="changeNum">emits</button>
</template>

<script setup lang="ts">
import { onMounted, nextTick, watch } from "vue";
// 定义props 接收父组件传递的参数
const props = defineProps({
  // 数字
  num: {
    type: Number,
    default: 0,
  },
  // 字符串
  str: {
    type: String,
    default: "",
  },
  // 布尔值
  bool: {
    type: Boolean,
    default: true,
  }
})
// 定义事件 传递给父组件
const emits = defineEmits(["changeNum"])
// 监听watch
watch(() => props.num, (newVal, oldVal) => {
  console.log("watch:", newVal, oldVal);
}, { deep: true, immediate: false })
// 挂载后
onMounted(() => {
  // 直接调用，可能拿不到props的值，因为props是异步的。
  // 可以使用nextTick，在dom更新完后执行
  nextTick(() => {
    // 初始化
    init();
  })
})

// 方法

// 初始化
const init = () => {
  // props的使用
  console.log("props：", props.num, props.str, props.bool);
}
// 改变num
const changeNum = () => {
  // 发送改变num的事件
  emits("changeNum", {})
}


</script>

<style lang="less" scoped>
.HelloWorld {}
</style>
